<template>
  <div class="theme-active-text-color content">
    <div class="form_content">
      <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="100px" class="demo-dataForm">
      <el-form-item label="材料名称:" prop="name">
        <el-input v-model="dataForm.name"></el-input>
      </el-form-item>
      <el-form-item label="材料Id:" prop="goods_id">
        <el-input v-model="dataForm.goods_id"></el-input>
      </el-form-item>
      <el-form-item label="采购数量:" prop="count">
        <el-input v-model="dataForm.count"></el-input>
      </el-form-item>
       <el-form-item label="采购单价:" prop="price">
        <el-input v-model="dataForm.price"></el-input>
      </el-form-item>
       <el-form-item label="采购商家:" prop="merchant">
        <el-input v-model="dataForm.merchant"></el-input>
      </el-form-item>
      <el-form-item label="申请人" prop="applyer">
        <el-input v-model="dataForm.applyer"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dataForm')">提交</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    <div class="record">
        <div class="title"><i class="el-icon-edit"></i> 询价记录：</div>
        <div class="tip">
          填写说明: 1.公司名称+单价+联系人+电话（最少3条）
        </div>
        <el-input type="textarea" v-model="dataForm.tips" :autosize="{ minRows: 14}"></el-input>
    </div>
  </div>
</template>

<script>
import { goodsApplyApi } from '@/api'
import fileImport from "@/utils/fileImport";
export default {
  name: "",
  components: {},
  data() {
    return {
      dataForm: {
          name: '',
          goods_id:'',
          count:'',
          price:'',
          merchant:'',
          applyer:'',
          tips:''
        },
        rules: {
          name: [{ required: true, message: '请输入材料名称', trigger: 'blur' }],
          goods_id: [{ required: true, message: '请填写材料id', trigger: 'change' }],
          count:[{required: true, message: '请输入采购量', trigger: 'blur'}],
          merchant:[{required: true, message: '请输入采购商家', trigger: 'blur'}],
          applyer:[{required: true, message: '请输入采购申请人', trigger: 'blur'}],
        }
    };
  },
  created() {},
  methods: {
    submitForm() {
      let _this=this;
        this.$refs.dataForm.validate(async (valid) => {
          if (valid) {
           let res = await goodsApplyApi(_this.dataForm);
            if(res.code=='200'){
              _this.$message({
                message: '申请成功',
                type: 'success'
              });
            }else{
              _this.$message({
                message: '申请失败',
                type: 'error'
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.dataForm.resetFields();
      },
      //上传图片
      imgChange(file){
        this.dataForm.goods_img = URL.createObjectURL(file.raw);
        fileImport({ file: file.raw }, "/upload/goods_img").then(res => {
          if(res){
            this.dataForm.goods_img = res.data
          }
        });
      },
     
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  overflow-y: auto;
  .form_content{
    width: 50%;
    height: 90%;
    padding: 50px 10px 10px 20px;
    .el-input{
      width: 300px;
    }
  }
  .record{
    width: 40%;
    height: 400px;
    margin-top: 20px;
    border-radius: 20px;
    padding: 20px;
    background: rgb(240, 239, 239);
    display: flex;
    flex-direction: column;
    .title{
      width: 100%;
      font-size: .2rem;
      color: #000;
    }
    .tip{
      width: 100%;
      margin: 5px 0;
      font-size: .14rem;
      color: rgb(155, 154, 154);
    }
  }
  .goods_img{
    width: 200px;
    height: 200px;
  }
}

</style>